import React from "react";
import LayoutVertical from "./LayoutVertical";
import LayoutClassic from "./LayoutClassic";
import LayoutTransverse from "./LayoutTransverse";
import LayoutColumns from "./LayoutColumns";
import ThemeDrawer from "./components/ThemeDrawer";
import { useShallow } from "zustand/react/shallow";
import { useGlobalStore } from "@/store/global";

const Layout: React.FC = () => {
  const { layout } = useGlobalStore(useShallow((state) => ({ layout: state.layout })));

  const LayoutComponents: Record<string, () => React.ReactNode> = {
    vertical: () => <LayoutVertical />,
    classic: () => <LayoutClassic />,
    transverse: () => <LayoutTransverse />,
    columns: () => <LayoutColumns />
  };

  return (
    <div className="h-full bg-[var(--el-color-colorBgContainer)]">
      {LayoutComponents[layout]()}
      <ThemeDrawer />
    </div>
  );
};

export default Layout;
